<html>
  <head>
    <title>960 Grid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/reset.css" />
    <link type="text/css" rel="stylesheet" href="css/text.css" />
    <link type="text/css" rel="stylesheet" href="css/960.css" />
    <link type="text/css" rel="stylesheet" href="css/sample.css" />
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  </head>
  <body>
		<div class="bg_12"></div>
		<div class="bg_16"></div>
		
		<div class="control">
			<input type="button" name="grid-12" value="Show gird-12" id="btn-grid-12" />
			<input type="button" name="grid-16" value="Show gird-16" id="btn-grid-16" />
		</div>
		
		<script type="text/javascript">
			$('#btn-grid-12').click(function(){
				var target = $('.bg_12');
				if ( target.is(':visible') ) {
					target.hide();
					
				} else {
					$('.bg_16').hide();
					target.slideDown('slow');
				}
			});
			
			$('#btn-grid-16').click(function(){
				var target = $('.bg_16');
				if ( target.is(':visible') ) {
					target.hide();
				} else {
					$('.bg_12').hide();
					target.slideDown('slow');
				}
			});
		</script>
  </body>
</html>
